<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 64 84"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#06F" d="M2.496 44.919a13.625 13.625 0 0 1 3.744.448c2.56-10.592 13.664-18.56 26.976-18.56 12.832 0 23.584 7.392 26.624 17.375h2.304c.8 0 1.472.64 1.44 1.44v8.672c0 .8-.64 1.44-1.44 1.44H59.84c-1.632 5.377-5.504 10.017-10.72 13.12v4.257a2.89 2.89 0 0 1-2.88 2.88h-5.792a2.888 2.888 0 0 1-2.88-2.88v-.257c-1.408.192-2.88.288-4.352.288-2.528 0-4.96-.287-7.264-.831v.8a2.89 2.89 0 0 1-2.88 2.88H17.28a2.888 2.888 0 0 1-2.88-2.88v-6.273c-5.344-4.223-8.672-10.207-8.672-16.863v-.224c-1.056-.352-2.048-.544-3.04-.48-1.184.032-2.208-.897-2.272-2.08-.032-1.217.896-2.24 2.08-2.273Zm52.416 3.584c0-2.4-1.952-4.352-4.352-4.352a4.357 4.357 0 0 0-4.352 4.351c.032 2.4 1.952 4.352 4.352 4.352 2.4 0 4.352-1.951 4.352-4.352Zm-15.008-9.984c.736.288 1.6-.096 1.856-.832.288-.736-.096-1.6-.832-1.856-6.144-2.369-12.384-2.369-18.528 0a1.428 1.428 0 0 0-.8 1.855c.224.577.768.928 1.344.928.16 0 .352-.031.512-.095 5.472-2.112 11.008-2.112 16.448 0Z"/><path fill="#002F5C" d="m28.943 37.517.141-2.582a37.62 37.62 0 0 1-4.703-.877 32.874 32.874 0 0 1-4.14-1.413c-1.19-.552-2.053-1.105-2.586-1.657l2.305-7.26a32.14 32.14 0 0 0 4.609 2.096c1.536.52 3.167.91 4.891 1.169l.282-5.36a5.857 5.857 0 0 1-.8-.146c-3.95-.844-6.819-1.965-8.606-3.362-1.787-1.429-2.68-3.508-2.68-6.236 0-2.761 1.018-4.889 3.056-6.383 2.038-1.527 4.829-2.436 8.372-2.729L28.943 0h6.114l-.141 2.777c2.853.195 4.985.569 6.396 1.12 1.443.52 2.462.96 3.058 1.316l-1.882 7.358c-.721-.26-1.724-.569-3.01-.926-1.285-.39-2.932-.698-4.938-.926l-.282 5.262c.282.065.548.114.8.147 2.194.357 4.138.893 5.831 1.607 1.693.715 3.026 1.706 3.998 2.973.972 1.266 1.458 2.923 1.458 4.97 0 2.76-.972 4.92-2.916 6.48-1.944 1.559-4.782 2.484-8.513 2.777l.141 2.582h-6.114ZM26.12 12.424c0 .845.314 1.479.94 1.9.659.39 1.537.7 2.634.927l-.235-4.824h-.329c-.815 0-1.52.178-2.116.536-.596.325-.894.812-.894 1.462ZM37.597 25.24c0-.65-.282-1.17-.847-1.56-.564-.39-1.38-.73-2.445-1.022l.235 4.677c.878-.032 1.599-.195 2.163-.487.596-.325.894-.861.894-1.608Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Val3 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
